<template>
  <div class="page">
    <div class="article-tabs">
      <van-tabs v-model="activeName" @click="onClick">
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="最新" name="latest"></van-tab>
      </van-tabs>

    </div>
    <div class="article-list">
      <van-list finished-text="'看什么看,都被你看没了'" v-model="loading" :finished="finished" @load="loadMore">
        <!-- 使用封装好的组件循环渲染 -->
        <ArticleItem v-for="item in articleList" :key="item.id" :avatar="item.avatar" :stem="item.stem"
          :creator="item.creator" :createdAt="item.createdAt" :content="item.content" :likeCount="item.likeCount"
          :views="item.views" :id="item.id"></ArticleItem>
      </van-list>
    </div>

  </div>
</template>

<script>
import { getArticleList } from '@/api/article'

export default {
  name: 'MyArticle', // 确保组件名称与路由name一致
  data () {
    return {
      // 定义List组件需要的变量
      loading: false,
      finished: false,
      current: 1,
      sorter: 'weight_desc',
      activeName: 'recommend',
      // 渲染测试数据
      articleListForTest: [
        {
          img: 'http://file.funit.cn/public/avatar/25.jpg',
          title: '文章标题',
          creator: 'fanfan',
          createdAt: '098',
          label: '今日分享一篇精彩有趣的文章内容基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。'
        },
        {
          img: 'http://file.funit.cn/public/avatar/26.jpg',
          title: '文章标题',
          creator: 'karina',
          createdAt: '099',
          label: '今日分享一篇精彩有趣的文章内容基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。'
        }
      ],
      articleList: []
    }
  },
  // 向接口要数据 (已在api/Article.js封装)
  //  created () {
  //   // getArticleLis函数鹅参数就是Params

  // },
  methods: {
    // 切换推荐和最新
    onClick (name, title) {
      this.activeName = name
      this.sorter = name === 'recommend' ? 'weight_desc' : ''
      this.articleList = []
      this.current = 1
      this.finished = false
      this.loadMore()
    },
    // 加载更多
    async loadMore () {
      console.log('加载更多')
      const res = await getArticleList({
        current: this.current++,
        pageSize: 5,
        sorter: this.sorter
        // sorter: null
      })
      console.log(res)
      // this.articleList = res.data.rows
      this.articleList.push(...res.data.rows)
      // 将loading改为false
      this.loading = false
      if (this.current > res.data.pageTotal) {
        this.finished = true
      }
    },
    // 将原来的 if-else 替换为简洁的表达式
    handleTabChange (name) {
      console.log('切换到:', name)
      this.$toast.success('切换到:', name)
      // 重置分页和数据
      this.current = 1
      this.articleList = []
      this.finished = false

      // 使用对象映射替代 if-else
      const sorterMap = {
        recommend: 'weight_desc',
        latest: 'created_at_desc'
      }
      this.sorter = sorterMap[name]

      // 重新加载数据
      this.loadMore()
    }
  },
  activated () {
    // 组件被激活时（从缓存恢复）可以在这里做额外处理
    console.log('MyArticle组件被激活')
  },
  deactivated () {
    // 组件被缓存时可以做清理工作
    console.log('MyArticle组件被缓存')
  }
}
</script>

<style lang="less" scoped>

.article-list {
  padding: 1rem;
}

.article-item {
  margin-bottom: 1rem;
}

article-item:hover {
  background-color: #f5f5f5;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
</style>
